<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>添加学生</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 提示信息 -->
        <div style="margin:10px;padding-top:15px;">
            <template>
                <el-alert title="欢迎您来到 添加教师 界面" type="success" effect="dark" center></el-alert>
            </template>
        </div>
        <!-- 用户列表主体部分 -->
        <el-card>
            <!-- 表格  用户列表部分  stripe隔行变色 -->
            <el-table :data="userList" border stripe>
                <!-- 索引列 -->
                <el-table-column type="index"></el-table-column>
                <el-table-column label="用户名" prop="username"></el-table-column>
                <el-table-column label="密码" prop="password"></el-table-column>
                <el-table-column label="角色" prop="role"></el-table-column>
                <el-table-column label="操作" >
                    <template>
                        <!-- 添加 -->
                        <el-button type="success" round>添加</el-button>
                        <!-- 修改 -->
                        <el-button type="warning" round>修改</el-button>
                        <!-- 删除 -->
                        <el-button type="danger" round>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页部分 -->
            <div>
                <!-- size-change 每页最大数量 -->
                <!-- current-change 当前页面变化数 -->
                <!-- layout 功能组件 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pageNum"
                    :page-sizes="[1, 2, 5, 100]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </el-card>
        <!-- 新增用户区域 -->
        <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="addForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addForm.email"></el-input>
                </el-form-item>
            </el-form>
            <!-- 底部按钮区域 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改对话框 -->
        <el-dialog title="修改用户信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
            <el-form :model="editForm" :rules="addFormRules" ref="editFormRef" label-width="70px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="editForm.username" disabled></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="editForm.password"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editForm.email"></el-input>
                </el-form-item>
            </el-form>
            <!-- 底部按钮区域 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUserInfo">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return{
            // 查询信息封装实体
            queryInfo: {
                query: "",  // 查询信息
                pageNum: 1, // 当前页
                pageSize: 5,    // 每页最大数
            },
            // 用户列表
            userList: [{},],    
            total: 0,   // 总记录数
            addDialogVisible: false,  // 对话框显示隐藏状态
            // 添加表单信息
            addForm: {
                username: "",
                password: "",
                email: "",
            },
            // 修改用户信息
            editForm: {},
            // 显示隐藏修改用户栏
            editDialogVisible: false,
            // 添加表单验证
            addFormRules: {
                username: [
                    // blur 失去焦点触发
                    { required: true, message: "请输入用户名", trigger: "blur"},
                    { min: 5, max: 8, message: "长度在5 到 8 个字符", trigger: "blur"},
                ],
                password: [
                    // blur 失去焦点触发
                    { required: true, message: "请输入密码", trigger: "blur"},
                    { min: 5, max: 8, message: "长度在5 到 8 个字符", trigger: "blur"},
                ],
                email: [
                    // blur 失去焦点触发
                    { required: true, message: "请输入邮箱", trigger: "blur"},
                    { min: 5, max: 15, message: "请输入正确邮箱地址", trigger: "blur"},
                ],
            },
            // 修改的表单验证
            editFormRules: {
                password: [
                    // blur 失去焦点触发
                    { required: true, message: "请输入密码", trigger: "blur"},
                    { min: 5, max: 8, message: "长度在5 到 8 个字符", trigger: "blur"},
                ],
                email: [
                    // blur 失去焦点触发
                    { required: true, message: "请输入邮箱", trigger: "blur"},
                    { min: 5, max: 15, message: "请输入正确邮箱地址", trigger: "blur"},
                ],
            }
        }
    },
    created(){
        this.getUserList();
    },
    methods: {
        // 获取所有用户
        async getUserList() {
            // console.log("111111111111111111");
            const {data: res} = await this.$http.get("alluser", {params: this.queryInfo});
            this.userList = res.data;   // 用户列表数据封装
            this.total = res.numbers;    // 总用户数封装
        },
        // 最大数   页面变化的时候我们会怎么做
        handleSizeChange(newSize) {
            this.queryInfo.pageSize = newSize;
            this.getUserList();
        },
        // 上一页 下一页 触发  pageNum触发动作
        handleCurrentChange(newPage){
            this.queryInfo.pageNum = newPage;
            this.getUserList();
        },
        async userStateChanged(userInfo){
            // 需要组件 和 状态内容
            // const { data:res } = await this.$http.put("userstate?id=" + userInfo.id + "&state=" + userInfo.state);
            const { data:res } = await this.$http.put(`userstate?id=${userInfo.id}&state=${userInfo.state}`);
            if(res!="success"){
                userInfo.id = !userInfo.id;
                return this.$message.error("操作失败");
            }
            this.$message.success("操作成功");
        },
        // 监听添加用户
        addDialogClosed() {
            this.$refs.addFormRef.resetFields();
        },
        // // 添加表单校验规则
        // addFormRef() {

        // },
        // // 按钮取消方法
        // addDialogVisible() {

        // },
        // 按钮确定方法
        addUser(){
            this.$refs.addFormRef.validate(async valid=>{
                // console.log(valid);
                if(!valid) return;
                console.log(this.addForm);
                const {data:res} = await this.$http.post("adduser", this.addForm);
                if (res!="success"){
                    return this.$message.error("操作失败");
                }
                    this.$message.success("操作成功");
                    this.addDialogVisible = false;
                    this.getUserList();
            });
        },
        // 根据主键删除信息
        async deleteUser(id){
            const confirmResult = await this.$confirm("此操作将永久删除用户, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).catch(err=> err);
            if(confirmResult != "confirm"){
                return this.$message.info("已取消删除");
            }
            const {data:res} = await this.$http.delete("deleteuser?id="+id);
            if(res != "success"){
                return this.$message.error("删除失败");
            }
            this.$message.success("删除成功");
            this.getUserList();
        },
        // 显示对话框
        async showEditDialog(id){
            const {data:res} = await this.$http.get("getupdateuser?id="+id);
            // 查询出来的用户信息反填到编辑表单里
            this.editForm = res;
            // 开启编辑菜单
            this.editDialogVisible = true;
        },
        // 关闭窗口
        editDialogVisible(){
            // 重置信息
            this.$refs.editFormRef.resetFields();
        },
        // 确认修改
        editUserInfo(){
            // 表单验证
            this.$refs.editFormRef.validate(async valid => {
            // 验证不成功
            if(!valid) return;
            //发起修改请求
            const {data:res} = await this.$http.put("edituser", this.editForm);
            if(res != "success") return this.$message.error("操作失败!");
            this.$message.success("操作成功!");
            // 修改对话框隐藏
            this.editDialogVisible = false;
            this.getUserList();
            })
        },
    },
}
</script>
<style>
/* 面包屑样式 */
.el-breadcrumb{
    margin-bottom: 20px;
    font-size: 15px !important;
}

</style>